<template>
  <el-row type="flex" justify="center">
    <el-col :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>更新认证</span>
        </div>
        <el-form ref="form" :model="form" label-width="120px" :rules="rules" label-position="right" @submit.native.prevent="submitForm">
          <!-- 名称 -->
          <el-form-item label="名称" prop="sshName">
            <el-input v-model="form.sshName"></el-input>
            <span class="help-text">为当前认证信息起一个容易识别的名称</span>
          </el-form-item>
          <!-- 认证方式 -->
          <el-form-item label="认证方式" prop="sshType">
            <el-select v-model="form.sshType">
              <el-option
                v-for="dict in dict.type.edge_nodes_ssh_type"
                :key="dict.value"
                :label="dict.label"
                :value="Number(dict.value)"
              />
            </el-select>
          </el-form-item>
          <!-- SSH用户名 -->
          <el-form-item label="SSH用户名" prop="sshUser">
            <el-input v-model="form.sshUser"></el-input>
            <span class="help-text">SSH登录用户名。</span>
          </el-form-item>
          <!-- SSH密码 -->
          <el-form-item label="SSH密码" prop="sshKey" v-if="form.sshType==0">
            <el-input v-model="form.sshKey" type="password" show-password></el-input>
            <span class="help-text">SSH登录用户密码，为了安全起见，此项数据保存后将不允许在界面查看完整明文，为避免忘记，请自行记录原始数据。</span>
          </el-form-item>
          <el-form-item label="私钥" prop="sshKey" v-if="form.sshType==1">
            <el-input v-model="form.sshKey" type="textarea"></el-input>
          </el-form-item>
          <!-- 备注 -->
          <el-form-item label="备注" class="remark-form-item" prop="note">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="点击展开备注" name="1">
                <el-input
                  v-model="form.note"
                  type="textarea"
                  :rows="4"
                ></el-input>
              </el-collapse-item>
            </el-collapse>
          </el-form-item>
          <!-- 提交按钮 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {addSsh, getSsh, updateSsh} from "@/api/nodes/ssh";
export default {
  name: 'UpdateSSH',
  dicts: ['edge_nodes_ssh_type'],
  watch:{
    'form.sshType':{
      handler() {
        if(this.form.sshType!=this.oldSshType){
          this.form.sshKey ='';
          this.oldSshType=this.form.sshType
        }
      },
    }
  },
  data() {
    return {
      form: {
        id: null,
        nodeId: null,
        sshUser: null,
        createdBy: null,
        createdTime: null,
      },
      activeNames: [], // 控制折叠面板的展开/收起
      oldSshType:'',
      rules: {
        sshUser: [{ required: true, message: 'SSH用户名不能为空', trigger: 'blur' }],
        // sshKey: [{ required: true, message: '请输入SSH密钥', trigger: 'blur' }],
        sshName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
      }
    };
  },
  created() {
    const sshId = this.$route.params.id;
    this.loadSshInfo(sshId);
  },
  methods: {
    loadSshInfo(id) {
      getSsh(id).then(response => {
        this.form = response.data;
        this.oldSshType=this.form.sshType
      }).catch(error => {
        this.$message.error("获取数据失败");
      });
    },
    // 提交表单
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateSsh(this.form).then(response => {
            this.$message.success("修改成功");
            this.$router.push({ name: 'Ssh' });
          }).catch(error => {
            this.$message.error("修改失败");
          });
        }
      });
    },
    // 取消操作
    cancel() {
      this.$router.push({ name: 'Ssh' }); // 返回列表页面
    }
  }
};
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}

.help-text {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
  display: block;
}

.el-button {
  margin-left: 10px;
}
</style>
